import React from "react";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import TextField from "@material-ui/core/TextField";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";

var {Provider , Consumer:FormConsumer} = React.createContext({})


class FormProvider extends React.Component {
	constructor() {
		super()
		this.state = {
			open :false,
			form :{},
			setOpen:this.setOpen.bind(this)
		}
	}
	setOpen(b) {
		var state = this.state
		state.open= b
		this.setState(state)
	}
	render() {
		return (
			<Provider value={this.state}>
			{this.props.children}
			</Provider>
		)
	}
}

function FormDialog(props) {
	// const [open, setOpen] = React.useState(false);

	// const handleClickOpen = () => {
	// 	setOpen(true);
	// };

	// const handleClose = () => {
	// 	props.setOpen(false);
	// };

	return (
		<FormConsumer>
			{(ctx)=>{
				console.log("FormConsumer::",ctx)
			return (
		<Dialog open={ctx.open} onClose={()=>{ctx.setOpen(false)}} aria-labelledby="form-dialog-title" maxWidth="md" fullWidth>
			<DialogTitle id="form-dialog-title">添加</DialogTitle>
			<DialogContent>
				<Grid container spacing={4}>
					<Grid item xs={12}>
						<TextField autoFocus margin="normal" id="name" label="name" type="text" fullWidth />
					</Grid>
					<Grid item xs={6}>
						<TextField margin="normal" id="name1" label="Email Address" type="email" fullWidth />
					</Grid>
					<Grid item xs={6}>
						<TextField margin="normal" id="name2" label="Email Address" type="email" fullWidth />
					</Grid>
				</Grid>
			</DialogContent>
			<DialogActions>
				<Button onClick={()=>{ctx.setOpen(false)}} color="primary">
					确定
				</Button>
			</DialogActions>
		</Dialog>
			)}}
		</FormConsumer>
	);
}

export {FormDialog,FormConsumer ,FormProvider} 